<%--
  Created by IntelliJ IDEA.
  User: jiangzhenzhen
  Date: 2018/8/13
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>租赁统计</title>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap-datetimepicker.min.css" type="text/css">
    <%--<script src="${js}/jquery-1.9.1.min.js"></script>--%>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="${js}/jquery.dataTables.js"></script>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <%--<script src="../assets/js/bootstrap-dateTime/datatimeZh.js"></script>--%>
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <%--<link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">--%>
    <link rel="stylesheet" href="${frames}/css/picker.css" type="text/css">
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <script src="${assets}/js/views/lib/multiple-select.js"></script>
    <script type="text/javascript" src="../assets/js/bootstrap-select.js"></script>
    <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap-select.css">
    <%--<script src="../assets/js/PercentPie.js"></script>--%>
    <script>
        var option = ''
        var myChart = ''
        function setHuiKuanLv(huiKuanJinE,yingShouZK,myChart1){
            yingShouZK = yingShouZK - huiKuanJinE
            option = {
                legend: {
                    show:false,
                    data:['总量','占比']
                },
                calculable : false,
                series : [
                    {
                        name:'占比',
                        type:'pie',
                        radius : ['70%', '85%'],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : true
                                }
                            },
                            emphasis : {
                                label : {
                                    show : true,
                                    position : 'center',
                                    textStyle : {
                                        fontSize : '30',
                                        fontWeight : 'bold'
                                    }
                                }
                            }
                        },
                        data:[
                            {value:huiKuanJinE,itemStyle:{
                                normal : {
                                    color: '#35acfd',
                                    label : {
                                        show : true,
                                        position : 'center'
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                }
                            }},
                            {value:yingShouZK,itemStyle:{
                                normal : {
                                    color: '#ccc',
                                    label : {
                                        show : false,
                                        position : 'center'
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                }
                            }},
                        ]
                    }
                ]
            };
            myChart1.setOption(option);
            resize(myChart1)
        }

        function setHuiKuanLv1(dom){
            myChart = echarts.init(dom)
            option = {
                legend: {
                    show:false,
                    data:['总量','占比']
                },
                calculable : false,
                series : [
                    {
                        name:'占比',
                        type:'pie',
                        radius : ['70%', '85%'],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : true
                                }
                            },
                            emphasis : {
                                label : {
                                    show : true,
                                    position : 'center',
                                    textStyle : {
                                        fontSize : '30',
                                        fontWeight : 'bold'
                                    }
                                }
                            }
                        },
                        data:[
                            {value:1,itemStyle:{
                                normal : {
                                    color: '#ccc',
                                    label : {
                                        show : false,
                                        position : 'center'
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                }
                            }},
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            resize(myChart)
        }

        function resize(myChart){
            if( myChart ){
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            }
        }
    </script>
    <style>
        .wrap{
            position: relative;
        }
        *{
            list-style:none;
            text-decoration:none;
        }
        a{
            cursor:pointer;
            /*display:inline-block;*/
            /*width:32px;*/
            /*text-align:center;*/
            /*line-height:34px;*/
        }
        a:hover{
            text-decoration:none;
        }
        h3{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #2a3137;
            padding-top:20px;
        }
        span,label{
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
            display:inline-block;
            text-align:center;
            line-height:34px;
        }
        .illtype{
            margin:0 1%;
            float:left;
        }
        #illselect{
            width:17%;
            float:left;
            vertical-align: middle;
        }
        .time{
            float:left;
            margin:0 1%;
        }
        #proselect{
            width:17%;
            float:left;
            vertical-align: middle;
        }
        .search1{
            width:100px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            background:#35acfd;
            line-height:19px;
        }
        .bootstrapDatepickr-cal{
            top:190px !important;
        }
        #example th{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #999999;
            text-align:center;
            line-height:41px;
        }
        #example td{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            text-align:center;
            line-height:56px;
        }
        #example tr{
            border-bottom:1px solid #e6e6e6;
        }
        .echart{
            display:inline-block;
            width:100%;
        }
        /*.echart div{*/
            /*float:left;*/
            /*width:12%;*/
            /*height:12%;*/
            /*margin-left:3%;*/
        /*}*/
        .chart{
            float:left;
            width:13%;
            height:13%;
            margin-left:3%;
            position:relative;
        }
        .chart div{
            position:absolute;
            width:100%;
            height:100%;
        }
        .chart span{
            position:absolute;
            width:100%;
            display:inline-block;
            text-align:center;
            font-size:17px;
            top:55%;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.2px;
            color: #999999;
            line-height:100%;
        }
        .chart b{
            position:absolute;
            width:100%;
            display:inline-block;
            text-align:center;
            top:30%;
            font-family: MicrosoftYaHei;
            font-size: 25px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.5px;
            color: #2a3137;
            line-height:30px;
        }
        .pagination{
        }
        .wrap .content #tablepart label{
            background-image:none !important;
            width:0px !important;
        }
        .content{
            height:920px !important;
        }
        input{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
        }
        .pull-left{
            display:block !important
        }
        .filter-option{
            top:0px;
        }
        .selectpicker{
            background:none !important;
        }
        .bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]){
            width:17% !important;
        }
        .show-tick{
            float:left !important;
        }
        .inner{
            overflow:scroll !important;
            height:220px !important;
        }
        .dataTables_length{
            display:none
        }
        .chart:nth-child(1) span{
            top:50% !important;
            font-size:14px !important;
            line-height:17px !important;
        }
        label{
            margin:0 1%;
        }
        .dataTable thead tr{
            background:#e6e6e6;
        }
        #endDate,#beginDate{
            font-size:16px;
        }
        #example_paginate{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <%@ include file="../../breadline.jsp" %>
    <div>
        <div style="width:99%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);">
            <div style="margin-left:19px;margin-right:19px;border-bottom:1px solid #e6e6e6;padding-bottom:20px;">
                <h3>租赁统计</h3>
                <div style="margin-top:20px;">
                    <label for="id_select2" class="illtype">疾病类型</label>
                    <select id="id_select2" multiple data-am-selected>
                        <medi:configOpt name="diseasesState" choose="false"/>
                        </optgroup>
                    </select>
                    <span class="time">时间</span>
                    <div style="width:14%;float:left;">
                        <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                            <input id="beginDate" type="text" class="lay-date" placeholder="  开始日期" readonly>
                        </div>
                    </div>
                    <div style="width:14%;float:left;margin-left:1%;">
                        <div id="NextTime" class="input-group date form_date" style="width: 100%" data-date-format="yyyy-mm-dd">
                            <input id="endDate" type="text" class="lay-date" placeholder="  结束日期" readonly>
                        </div>
                    </div>
                    <label for="type_select1" class="illtype">设备类型</label>
                    <select id="type_select1" class="selectpicker bla bla bli" multiple data-live-search="true">
                        <medi:configOpt name="instrumentName" choose="false"/>
                        </optgroup>
                    </select>
                    <button type="button" class="btn btn-info search1" onclick="search();" style="margin-left:1.5% !important;">
                        <img src="../assets/images/search.png" alt="" style="width:18px;vertical-align: middle;"> 搜索
                    </button>
                </div>
            </div>
            <div style="margin-left:19px;margin-right:19px;width:95%;overflow:hidden;padding-bottom:2%;">
                <h3 style="margin-bottom:2%">设备统计</h3>
                <div class="echart">
                    <div class="chart">
                        <div id="total_text" class="floatLeft"></div>
                        <b></b>
                        <span>设备<br>使用次数</span>
                    </div>
                    <div class="chart">
                        <div id="pressure_text" class="floatLeft"></div>
                        <b></b>
                        <span>血压仪</span>
                    </div>
                    <div class="chart">
                        <div id="sugar_text" class="floatLeft"></div>
                        <b></b>
                        <span>血糖仪</span>
                    </div>
                    <div class="chart">
                        <div id="ear_text" class="floatLeft"></div>
                        <b></b>
                        <span>耳温枪</span>
                    </div>
                    <div class="chart">
                        <div id="heart_text" class="floatLeft"></div>
                        <b></b>
                        <span>胎心仪</span>
                    </div>
                    <div class="chart">
                        <div id="fog_text" class="floatLeft"></div>
                        <b></b>
                        <span>雾化器</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="" class="content">
            <div style="width:99%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);margin-top:20px;">
                <div style="margin-left:19px;margin-right:19px;padding-bottom:20px;overflow:hidden">
                    <h3 style="padding-top:20px;">租赁历史纪录</h3>
                    <div id="tablepart">
                        <table id="example" class="display" cellspacing="10" width="100%">
                            <thead>
                            <tr>
                                <th>设备名称</th>
                                <th>设备SN</th>
                                <th>租赁人</th>
                                <th>联系方式</th>
                                <th>租赁日期</th>
                                <th>已付押金</th>
                                <th>归还日期</th>
                                <th>设备状态</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function initDateTime(id){
        $(id).datetimepicker({
            language:  'zh',
            weekStart:  0,
            todayBtn: true,
            autoclose:  1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    }
    var total;
    var myChart;
    var text;
    var dom;
    var total;
    var pressure;
    var sugar;
    var ear;
    var heart;
    var fog;
    $(document).ready(function() {
        initLayDate('#beginDate');
        initLayDate('#endDate');
        $(function() {
            $("#id_select2").selectpicker({
                noneSelectedText: '请选择' //默认显示内容  
            });
        });
        $(function() {
            $("#type_select1").selectpicker({
                noneSelectedText: '请选择' //默认显示内容  
            });
        });
        var options = $(".selectpicker option");
        $('.selectpicker').selectpicker({
            'selectedText': 'cat'
        });
        $(".dropdown-toggle").on('click',function(){
            $(options[0]).attr("disabled",true)
        })
        $('.pull-left').text('请选择')
        var pull = $('.inner')
        var pulltext = $('.pull-left')
        var lis = pull[0].childNodes
        // 添加复选框
        // 初始化获取echarts对应数据
        $.ajax({
            url:"${URL_RENT_COUNT}",
            dataType:"json",
            type:"post",
            async: false,
            success:function(data){
                // 总数
                total = data.data.total;
                text = '设备使用次数'
                dom = document.getElementById('total_text')
                var myChart = echarts.init(dom);
                $('.chart:nth-child(1) b').text(total)
                setHuiKuanLv(total,total,myChart);
                // 血压仪
                dom = document.getElementById('pressure_text')
                var myChart1 = echarts.init(dom);
                pressure = data.data.pressure;
                $('.chart:nth-child(2) b').text(pressure)
                text = '血压仪'
                setHuiKuanLv(pressure,total,myChart1)
//                Echarts(data.data.pressure,text,pressure_text)
                // 血糖仪
                dom = document.getElementById('sugar_text')
                sugar = data.data.sugar
                var myChart2 = echarts.init(dom);
                $('.chart:nth-child(3) b').text(sugar)
                text = '血糖仪'
                setHuiKuanLv(sugar,total,myChart2)
                // 耳温枪
                ear = data.data.ear
                dom = document.getElementById('ear_text')
                var myChart3 = echarts.init(dom);
                $('.chart:nth-child(4) b').text(ear)
                text = '耳温枪'
                setHuiKuanLv(ear,total,myChart3)
                // 胎心仪
                heart = data.data.heart;
                dom = document.getElementById('heart_text')
                $('.chart:nth-child(5) b').text(heart)
                var myChart4 = echarts.init(dom);
                text = '胎心仪'
                setHuiKuanLv(heart,total,myChart4)
                // 雾化器
                fog = data.data.fog;
                dom = document.getElementById('fog_text')
                $('.chart:nth-child(6) b').text(fog)
                var myChart5 = echarts.init(dom);
                text = '雾化器'
                setHuiKuanLv(fog,total,myChart5)
            }
        })

    });
    var table,
        startTime,
        endtime,
        // 疾病类型
        illtype,
        // 设备类型
        protype;
    function search(){
        var diseases = ''
        if( $('#id_select2 option:selected').text() === '高血压' ){
            diseases = '1'
        }else if( $('#id_select2 option:selected').text() === '糖尿病' ){
            diseases = '2'
        }else{
            diseases = ''
        }
        $.ajax({
            url:"${URL_RENT_COUNT}",
            dataType:"json",
            type:"post",
            data:{
                startTime:$('#beginDate').val(),
                endTime:$('#endDate').val(),
                instrumentTypes:$('#type_select1 option:selected').text(),
                diseases:diseases
            },
            success:function(data){
                // 总数
                total = data.data.total;
                if( total != '0' ){
                    $('.chart:nth-child(1) b').text(total)
                    var myChart1 = echarts.init(document.getElementById('total_text'));
                    setHuiKuanLv(total,total,myChart1);
                    // 血压仪
                    pressure = data.data.pressure;
                    if( pressure == null ){
                        pressure = "0"
                    }
                    $('.chart:nth-child(2) b').text(pressure)
                    var myChart2 = echarts.init(document.getElementById('pressure_text'));
                    setHuiKuanLv(pressure,total,myChart2);
                    // 血糖仪
                    sugar = data.data.sugar
                    if( sugar == null ){
                        sugar = "0"
                    }
                    $('.chart:nth-child(3) b').text(sugar)
                    var myChart3 = echarts.init(document.getElementById('sugar_text'));
                    setHuiKuanLv(sugar,total,myChart3);
                    // 耳温枪
                    ear = data.data.ear
                    if( ear == null ){
                        ear = "0"
                    }
                    $('.chart:nth-child(4) b').text(ear)
                    var myChart4 = echarts.init(document.getElementById('ear_text'));
                    setHuiKuanLv(ear,total,myChart4);
                    // 胎心仪
                    heart = data.data.heart;
                    if( heart == null ){
                        heart = "0"
                    }
                    $('.chart:nth-child(5) b').text(heart)
                    var myChart5 = echarts.init(document.getElementById('heart_text'));
                    setHuiKuanLv(heart,total,myChart5);
                    // 雾化器
                    fog = data.data.fog;
                    if( fog == null ){
                        fog = "0"
                    }
                    $('.chart:nth-child(6) b').text(fog)
                    var myChart6 = echarts.init(document.getElementById('fog_text'));
                    setHuiKuanLv(fog,total,myChart6);
                }else{
                    dom = document.getElementById('heart_text')
                    setHuiKuanLv1(dom);
                    dom1 = document.getElementById('fog_text')
                    setHuiKuanLv1(dom1);
                    dom2 = document.getElementById('ear_text')
                    setHuiKuanLv1(dom2);
                    dom3 = document.getElementById('sugar_text')
                    setHuiKuanLv1(dom3);
                    dom4 = document.getElementById('pressure_text')
                    setHuiKuanLv1(dom4);
                    dom5 = document.getElementById('total_text')
                    setHuiKuanLv1(dom5);
                    $('.chart b').text('0')
                }
            }
        })
        refreshTable()
    }
    function initTable() {
        table = $('#example').DataTable({
            "dom" : "<'row'<'#mytool.col-xs-10'><'col-xs-6'f>r>"
            + "t"
            + "<'row pageNum'<p>>",
            "bFilter" : false,//去掉搜索框
//            "sLengthMenu":[10],
            "bAutoWidth" : true, //自适应宽度
            "bInfo":false,
            "sPaginationType" : "full_numbers",
            "ordering" : false,//是否允许Datatables开启排序
            "bProcessing" : true,
            "bServerSide" : true,
            "sScrollX":"100%",
            "sAjaxSource":'${URL_RENT_SEARCHRENT}',
            "sAjaxDataProp": "dataList",//查询后，返回的集合
            "fnServerData": function ( sSource, aoData, fnCallback ) {  //查询条件
                aoData.push(
                    {
                        "name": "diseases",
                        "value": $("#id_select2 option:selected").val()
                    },
                    {
                        "name": "startTime",
                        "value": $("#beginDate").val()
                    },
                    {
                        "name": "endTime",
                        "value": $("#endDate").val()
                    },
                    {
                        "name" : "instrumentTypes",
                        "value" :$("#type_select1 option:selected").val()
                    }
                ),
                    $.ajax( {
                        "dataType": 'json',
                        "url": sSource,
                        "type":'post',
                        "data": aoData,
                        "success": function(resp){
                            fnCallback(resp)
                        }
                    } );
            },
            "aoColumns" : [ {
                "mDataProp" : "instrumentType"
            },{
                "mDataProp" : "instrumentSN"
            },{
                "mDataProp" : "rentMan"
            },{
                "mDataProp" : "rentTel"
            },{
                "mDataProp" : "rentTime"
            },{
                "mDataProp" : "rentMoney"
            },{
                "mDataProp" : "backTime"
            },{
                "targets": 7,
                "data": null,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    if( oData.backStatus === '1' ){
                        $(nTd).text("正常")
                    }else if( oData.backStatus === '2' ){
                        $(nTd).text("损坏")
                    }else if( oData.backStatus === '3' ){
                        $(nTd).text("遗失")
                    }else{
                        $(nTd).text("")
                    }
                }
            }],
            "oLanguage": {//插件的汉化
                "sLengthMenu": "32",
                "sZeroRecords" : "抱歉， 没有找到",
                "sInfoEmpty" : "没有数据",
                "sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
                "oPaginate" : {
                    "sFirst" : "",
                    "sPrevious" : "<b>上一页<b>",
                    "sLast" : "",
                    "sNext" : "<i>下一页</i>"

                },
                "sZeroRecords" : "没有检索到数据",
                "sProcessing" : "<img src='' />",
                "sSearch" : "搜索"
            }
        } );
    }
    initTable()
</script>
</body>
</html>
